import { useState, useCallback } from 'react';
import { useSelector } from 'react-redux';
import {
  CheckList,
  List,
  Picker,
  Input
} from 'antd-mobile';
import { useBoolean } from 'ahooks';
import { Button, message } from 'antd';

import questionStyle from './style.module.less';

const { Item } = CheckList;
const { Item: ListItem } = List;

/** 姓名 */
export const Name = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, val: string, isInput?: boolean) => void
}) => {
  const [name, setName] = useState<string>();
  const { title } = questionStyle;
  const { next$ } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    next$: storeState.next$
  }));

  const next = useCallback(
    (curName?: string) => {
      if (next$) {
        // 需要判断邮箱格式是否正确
        if (curName === undefined || curName === '') {
          message.error('请填写姓名');
          return;
        }

        if (curName.length > 20) {
          message.error('请填正确的姓名');
          return;
        }

        next$.emit();
      }
    }, [next$]
  );

  return (
    <>
      <div className={title}>
        请输入您的姓名
      </div>
      <List
        style={{
          '--prefix-width': '6em',
        }}
      >
        <List.Item extra={(
          <Button
            type="link"
            onClick={() => next(name)}
          >
            保存
          </Button>
        )}
        >
          <Input
            placeholder="请输入姓名"
            clearable
            value={value}
            onChange={(val) => {
              setName(val);
              onChange('name', val, true);
            }}
          />
        </List.Item>
      </List>
    </>
  );
};

/** 工号 */
export const Num = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, val: string, isInput?: boolean) => void
}) => {
  const [num, setNum] = useState<string>();
  const { title } = questionStyle;
  const { next$ } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    next$: storeState.next$
  }));

  const next = useCallback(
    (curNum?: string) => {
      if (next$) {
        // 需要判断邮箱格式是否正确
        if (curNum === undefined || curNum === '') {
          message.error('请填写工号');
          return;
        }

        if (curNum.length > 30) {
          message.error('请填正确的工号');
          return;
        }

        next$.emit();
      }
    }, [next$]
  );

  return (
    <>
      <div className={title}>
        请输入您的工号
      </div>
      <List
        style={{
          '--prefix-width': '6em',
        }}
      >
        <List.Item extra={(
          <Button
            type="link"
            onClick={() => next(num)}
          >
            保存
          </Button>
        )}
        >
          <Input
            placeholder="请输入工号"
            clearable
            value={value}
            onChange={(val) => {
              setNum(val);
              onChange('num', val, true);
            }}
          />
        </List.Item>
      </List>
    </>
  );
};

/** 邮箱 */
export const Email = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, val: string, isInput?: boolean) => void
}) => {
  const [email, setEmail] = useState<string>();
  const { title } = questionStyle;
  const { next$ } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    next$: storeState.next$
  }));

  const next = useCallback(
    (curEmail?: string) => {
      if (next$) {
        const reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;

        // 需要判断邮箱格式是否正确
        if (curEmail === undefined || reg.test(curEmail) || curEmail === '') {
          next$.emit();
          return;
        }
        message.error('邮箱格式错误');
      }
    }, [next$]
  );

  return (
    <>
      <div className={title}>
        请输入您的邮箱
      </div>
      <List
        style={{
          '--prefix-width': '6em',
        }}
      >
        <List.Item extra={(
          <Button
            type="link"
            onClick={() => next(email)}
          >
            {email ? '保存' : '跳过'}
          </Button>
        )}
        >
          <Input
            placeholder="请输入邮箱"
            clearable
            value={value}
            onChange={(val) => {
              setEmail(val);
              onChange('email', val, true);
            }}
          />
        </List.Item>
      </List>
    </>
  );
};

/** 性别 */
export const Gender = ({
  value,
  onChange
}: {
  value: number | undefined,
  onChange: (key: string, val: string | number) => void
}) => {
  const curValue = value !== undefined ? [`${value}`] : undefined;
  const { title } = questionStyle;
  return (
    <>
      <div className={title}>
        您的性别是？
      </div>
      <CheckList
        value={curValue}
        onChange={(
          checked: string[]
        ) => {
          onChange('gender', Number(checked[0]));
        }}
      >
        <Item value="1">男</Item>
        <Item value="2">女</Item>
      </CheckList>
    </>
  );
};

/** 婚姻状况 */
export const MaritalStatus = ({
  value,
  onChange
}: {
  value: number | undefined,
  onChange: (key: string, val: string | number) => void
}) => {
  const curValue = value !== undefined ? [`${value}`] : undefined;
  const { title } = questionStyle;

  return (
    <>
      <div className={title}>
        您的婚姻状况？
      </div>
      <CheckList
        value={curValue}
        onChange={(
          checked: string[]
        ) => {
          onChange('maritalStatus', Number(checked[0]));
        }}
      >
        <Item value="1">已婚</Item>
        <Item value="0">未婚</Item>
      </CheckList>
    </>
  );
};

/** 子女情况 */
export const ChildrenSituation = ({
  value,
  onChange
}: {
  value: number | undefined,
  onChange: (key: string, val: string | number) => void
}) => {
  const curValue = value !== undefined ? [`${value}`] : undefined;
  const { title } = questionStyle;

  return (
    <>
      <div className={title}>
        您是否有子女？
      </div>
      <CheckList
        value={curValue}
        onChange={(
          checked: string[]
        ) => {
          onChange('childrenSituation', Number(checked[0]));
        }}
      >
        <Item value="1">有</Item>
        <Item value="0">无</Item>
      </CheckList>
    </>
  );
};

/** 年龄 */
export const Age = ({
  value,
  onChange
}: {
  value: number | undefined,
  onChange: (key: string, val: string | number) => void
}) => {
  const curValue = value !== undefined ? [`${value}`] : undefined;
  const { title } = questionStyle;

  return (
    <>
      <div className={title}>
        您的年龄？
      </div>
      <CheckList
        value={curValue}
        onChange={(
          checked: string[]
        ) => {
          onChange('age', Number(checked[0]));
        }}
      >
        <Item value="1">20-30岁</Item>
        <Item value="2">31-40岁</Item>
        <Item value="3">41-50岁</Item>
        <Item value="4">50岁以上</Item>
      </CheckList>
    </>
  );
};

/** 文化程度 */
export const Education = ({
  value,
  onChange
}: {
  value: number | undefined,
  onChange: (key: string, val: string | number) => void
}) => {
  const curValue = value !== undefined ? [`${value}`] : undefined;
  const { title } = questionStyle;

  return (
    <>
      <div className={title}>
        您的文化程度？
      </div>
      <CheckList
        value={curValue}
        onChange={(
          checked: string[]
        ) => {
          onChange('education', Number(checked[0]));
        }}
      >
        <Item value="1">大专及以下</Item>
        <Item value="2">本科</Item>
        <Item value="3">硕士</Item>
        <Item value="4">硕士以上</Item>
      </CheckList>
    </>
  );
};

/** 工作单位 */
export const WorkUnit = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, _value: string) => void
}) => {
  const { title } = questionStyle;
  const { workUnit } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    workUnit: storeState.workUnit,
  }));

  const curValue = value !== undefined ? [value] : undefined;
  const [
    visible,
    {
      setTrue: setVisible,
      setFalse: setHidden
    }
  ] = useBoolean(false);

  return (
    <>
      <div className={title}>
        您的工作单位为？
      </div>
      <List>
        <ListItem onClick={() => { setVisible(); }}>
          {curValue ?? '请选择您的工作单位'}
        </ListItem>
      </List>
      <Picker
        columns={[workUnit.map((item) => item.name)]}
        visible={visible}
        onClose={() => {
          setHidden();
        }}
        value={curValue}
        onConfirm={(currentValue: (string | null)[]) => {
          if (currentValue[0]) {
            onChange('workUnit', currentValue[0]);
          }
        }}
      />
    </>
  );
};

/** 附属单位 */
export const Affiliated = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, _value: string) => void
}) => {
  const { title } = questionStyle;
  const { affiliatedUnit } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    affiliatedUnit: storeState.affiliatedUnit,
  }));

  const curValue = value !== undefined ? [value] : undefined;
  const [
    visible,
    {
      setTrue: setVisible,
      setFalse: setHidden
    }
  ] = useBoolean(false);

  return (
    <>
      <div className={title}>
        您的附属单位为？
      </div>
      <List>
        <ListItem onClick={() => { setVisible(); }}>
          {curValue ?? '请选择您的附属单位'}
        </ListItem>
      </List>

      <Picker
        columns={[affiliatedUnit.map((item) => item.name)]}
        visible={visible}
        onClose={() => {
          setHidden();
        }}
        value={curValue}
        onConfirm={(currentValue: (string | null)[]) => {
          if (currentValue[0]) {
            onChange('affiliated', currentValue[0]);
          }
        }}
      />
    </>
  );
};

/** 工作职位 */
export const JobPosition = ({
  value,
  onChange
}: {
  value: string | undefined,
  onChange: (key: string, _value: string) => void
}) => {
  const { title } = questionStyle;
  const { jobPosition } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    jobPosition: storeState.jobPosition,
  }));
  const curValue = value !== undefined ? [value] : undefined;
  const [
    visible,
    {
      setTrue: setVisible,
      setFalse: setHidden
    }
  ] = useBoolean(false);

  return (
    <>
      <div className={title}>
        您的工作职位为？
      </div>
      <List>
        <ListItem onClick={() => { setVisible(); }}>
          {curValue ?? '请选择您的工作职位'}
        </ListItem>
      </List>
      <Picker
        columns={[jobPosition.map((item) => item.name)]}
        visible={visible}
        onClose={() => {
          setHidden();
        }}
        value={curValue}
        onConfirm={(currentValue: (string | null)[]) => {
          if (currentValue[0]) {
            onChange('jobPosition', currentValue[0]);
          }
        }}
      />

    </>
  );
};

/** 工作岗位 */
export const OperatingPost = ({
  value,
  onChange,
}: {
  value: string | undefined,
  onChange: (key: string, _value: string) => void
}) => {
  const { title } = questionStyle;
  const { operatingPost } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    operatingPost: storeState.operatingPost,
  }));
  const curValue = value !== undefined ? [value] : undefined;
  const [
    visible,
    {
      setTrue: setVisible,
      setFalse: setHidden
    }
  ] = useBoolean(false);

  return (
    <>
      <div className={title}>
        您的工作岗位为？
      </div>
      <List>
        <ListItem onClick={() => { setVisible(); }}>
          {curValue ?? '请选择您的工作岗位'}
        </ListItem>
      </List>
      <Picker
        columns={[operatingPost.map((item) => item.name)]}
        visible={visible}
        onClose={() => {
          setHidden();
        }}
        value={curValue}
        onConfirm={(currentValue: (string | null)[]) => {
          if (currentValue[0]) {
            onChange('operatingPost', currentValue[0]);
          }
        }}
      />
    </>
  );
};
